<template>
	<s-layout navbar="inner1" :bgStyle="{ color: 'transparent' }">
		<view class="content">
			<assNavbar
				:title="cardData.name"
				color="#fff"
				:background="{
					img: sheep.$url.cdn(cardData.top),
					BGcolor: 'transparent',
				}"
			/>
			<image class="bgTop" :src="sheep.$url.cdn(cardData.top)" mode="widthFix" />
			<image :src="sheep.$url.cdn(cardData.bage)" class="income-img"></image>
			<view class="ss-m-x-24 ss-m-t-50">
				<image
					class="cardBox-bg"
					:src="sheep.$url.cdn(cardData.pic1)"
					mode="widthFix"
				/>
				<image
					class="infoCard"
					:src="sheep.$url.cdn(cardData.pic2)"
					mode="widthFix"
				/>
			</view>
			<view style="height: 80rpx; width: 100%"></view>
			<su-fixed bottom>
				<view class="ss-p-x-20 ss-p-b-60 ss-flex justify-between">
					<button class="ss-reset-button btn ss-m-t-40" @click="btnClick()">
						{{ statusEnum[state.status] ? statusEnum[state.status].tips :'立即参与'}}
					</button>
				</view>
			</su-fixed>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from '@/components/ass-navbar.vue';
	import { ref, reactive, computed, onBeforeMount, nextTick } from 'vue';
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import userApi from '@/sheep/api/user.js';

	const sys_navBar = sheep.$platform.navbar; //标题栏高度
	const template = computed(() => sheep.$store('app').template?.home);
	const state = reactive({
		type: 0,
		status:'',
	});
	let pageHeight = computed(() => sheep.$platform.device.safeArea.height - 44 - 44);
	const list = [
		{
			top: '/storage/service/20250315/4eb8876d1286911fe93b6ec66ef2b831.png',
			name: '指导员',
			key:'zdy',
			pic1: '/storage/service/20250315/100@3x.png',
			pic2: '/storage/giveaway/20250315/zhidaoyuan.png',
			bage: '/storage/giveaway/20250315/zhidaoyuan-bage.png',
		},
		{
			top: '/storage/service/20250315/c1cbf0eda18b68b6c9ba4ef11e951592.png',
			name: '教导员',
			key:'jdy',
			pic1: '/storage/service/20250315/57c2b10e0cf02d32eba3bc53820de1aa.png',
			pic2: '/storage/giveaway/20250315/jiaodaoyuan.png',
			bage: '/storage/giveaway/20250315/jiaodaoyuan-bage.png',
		},
		{
			top: '/storage/service/20250315/30cdb861bcd31180bb7d9da6b812fe29.png',
			name: '督导',
			key:'dd',
			pic1: '/storage/service/20250315/fb439413534e3ab2f042bacef4847edb.png',
			pic2: '/storage/giveaway/20250315/dudaoyuan.png',
			bage: '/storage/giveaway/20250315/dudao-bage.png',
		},
	];
	const cardData = computed(()=>list[state.type])
	const statusEnum ={
		0 :{
			tips:'审核已提交、审核中',
		},
		1 :{
			tips:'已开通'
		},
		2 :{
			tips:'审核驳回、请重新提交'
		},
	}
	onLoad((opt) => {
		state.type = opt.type;
		
	});
	onShow(()=>{
		queryState()
	})
	function btnClick() {
		if(state.status == 1){
			return uni.showToast({
				title:'已开通成功',
				icon:'none'
			})
		}
		if(state.status === 0){
			return uni.showToast({
				title:'请耐心等待审核通过',
				icon:'none'
			})
		}
		sheep.$router.go(`/pages/creater/apply?role=${state.type}&status=${state.status}`);
	}
	async function queryState(){
		let {error ,data} = await sheep.$api.service.queryApply({
			project:cardData.value.key
		})
		if(error == 0 && data.data.length){
			state.status = data.data[0].status
		}
	}
</script>

<style lang="scss" scoped>
	.bgTop {
		width: 100%;
		height: 331rpx;
		margin-top: v-bind('-sys_navBar+"px"');
		margin-bottom: -200rpx;
	}

	.cardBox-bg {
		width: 100%;
		height: 295rpx;
	}
	.infoCard {
		width: 100%;
		margin-top: 30rpx;
	}
	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #003288 !important;
		border-radius: 49rpx;
		font-size: 32rpx;
		color: #ffffff !important;
	}
	// .btn[disabled]{
	// 	background:rgba(115, 121, 136)!important;
	// }
	.content {
		position: relative;
		.income-img {
			position: absolute;
			z-index: 55;
			right: 30rpx;
			top: 200rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
